<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="申请人" prop="applyUserId" >
        <el-input
          v-model="queryParams.applyUserId"
          placeholder="请输入申请人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请人姓名" prop="applyUserName" label-width="100px">
        <el-input
          v-model="queryParams.applyUserName"
          placeholder="请输入申请人姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="总数量" prop="totalCount">
        <el-input
          v-model="queryParams.totalCount"
          placeholder="请输入总数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="审核人名字" prop="auditorUserName" label-width="100px">
        <el-input
          v-model="queryParams.auditorUserName"
          placeholder="请输入审核人名字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请状态" prop="requestStatus">
        <el-select v-model="queryParams.requestStatus" placeholder="申请状态" clearable>
          <el-option
              v-for="dict in dict.type.purchase_request_status"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['purchase:purchase:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['purchase:purchase:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['purchase:purchase:remove']"
        >删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 采购申请单列表 -->
    <el-table v-loading="loading" :data="purchaseList" @selection-change="handlePurchaseSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="采购申请单ID" align="center" prop="id" >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleView(scope.row)" v-hasPermi="['purchase:purchase:query']">{{
              scope.row.id }}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用项目" align="center" prop="usedProject" />
      <el-table-column label="申请描述" align="center" prop="remark" />
      <el-table-column label="申请人" align="center" prop="applyUserName" />
      <el-table-column label="总数量" align="center" prop="totalCount" />
      <el-table-column label="审核人" align="center" prop="auditorUserName" />
      <el-table-column label="申请状态" align="center" prop="requestStatus" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.purchase_request_status" :value="scope.row.requestStatus" />
        </template>
      </el-table-column>
      <el-table-column label="审核驳回理由" align="center" prop="rejectMsg" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['purchase:purchase:edit']"
            v-if="scope.row.requestStatus===1||scope.row.requestStatus===4"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['purchase:purchase:remove']"
             v-if="scope.row.requestStatus===1"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-check"
            @click="applyPurchaseSubmit(scope.row)"
            v-hasPermi="['purchase:purchase:apply']"
            v-if="canApply(scope.row)"
          >提交申请</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-success"
            @click="handleAuditPass(scope.row)"
            v-hasPermi="['purchase:purchase:audit']"
            v-if="canAudit(scope.row)"
          >审核通过</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-error"
            @click="handleAuditReject(scope.row)"
            v-hasPermi="['purchase:purchase:audit']"
           v-if="canAudit(scope.row)"
          >审核驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 采购申请单详情页面 -->
    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
      <div class="purchase-detail-container">
        <!-- 表头信息 -->
        <el-card class="header-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>申请单基本信息</span>
          </div>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="optType === 'view'">

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="使用项目" prop="usedProject">
                  <el-input v-model="form.usedProject" placeholder="输入使用项目"  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="申请描述" prop="remark">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入申请描述" :rows="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间" prop="createTime">
                  <el-input v-model="form.createTime" type="text" placeholder="创建时间" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="合同附件" prop="contractUrl">
                  <template v-if="isEdit">
                    <file-upload v-model="form.contractUrl" :limit="1" placeholder="物料规格书" />
                  </template>
                  <template v-else>
                    <el-link type="primary" :href="form.contractUrl" v-if="form.contractUrl">{{form.contractUrl}}</el-link>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="驳回原因" prop="rejectMsg">
                  <el-input v-model="form.rejectMsg" type="textarea" placeholder="驳回原因" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="总数量" prop="totalCount">
                  <el-input v-model="form.totalCount" placeholder="总数量" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 子项信息 -->
        <el-card class="detail-card" shadow="never" style="margin-top: 20px;">
          <div
              slot="header"
              class="clearfix"
              style="display: flex; align-items: center; gap: 10px;"
          >
            <!-- 标题文字 -->
            <span style="font-weight: bold; color: #303133;">采购申请单子项</span>

            <!-- 按钮组（紧接标题右侧） -->
            <el-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddItem"
                v-hasPermi="['purchase:detail:add']"
                :disabled="optType === 'view'"
            >
              添加子项
            </el-button>

            <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :disabled="optType === 'view'"
                @click="handleDeleteBatch"
                v-hasPermi="['purchase:detail:remove']"
            >
              删除子项
            </el-button>
          </div>
          <!-- 汇总信息 -->
          <el-row :gutter="20" style="margin-bottom: 15px; padding: 10px; background-color: #f5f7fa; border-radius: 4px;">
            <el-col :span="6">
              <span style="font-weight: bold; color: #606266;">子项总数：</span>
              <span style="color: #409EFF; font-weight: bold;">{{ detailList.length }}</span>
            </el-col>
            <el-col :span="6">
              <span style="font-weight: bold; color: #606266;">总数量：</span>
              <span style="color: #67C23A; font-weight: bold;">{{ getTotalQuantity() }}</span>
            </el-col>
            <el-col :span="6">
              <span style="font-weight: bold; color: #606266;">临时数据：</span>
              <span style="color: #E6A23C; font-weight: bold;">{{ getTempCount() }}</span>
            </el-col>
            <el-col :span="6">
              <span style="font-weight: bold; color: #606266;">已保存：</span>
              <span style="color: #909399; font-weight: bold;">{{ getSavedCount() }}</span>
            </el-col>
          </el-row>

          <!-- 子项表格 -->
          <el-table v-loading="detailLoading" :data="detailList" @selection-change="handleDetailSelectionChange"    >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="产品编码" align="center" prop="itemCode" />
            <el-table-column label="产品名称" align="center" prop="itemName" />
            <el-table-column label="单位" align="center" prop="unitOfMeasure" />
            <el-table-column label="物料图片" align="left" prop="imgUrl" width="80">
              <template slot-scope="scope">
                <image-preview v-if="scope.row.imgUrl" :src="scope.row.imgUrl" :width="50" :height="50"/>
              </template>
            </el-table-column>
            <el-table-column label="采购物品截图" align="left" prop="screenShotUrl" width="120">
              <template slot-scope="scope">
                <image-preview v-if="scope.row.screenShotUrl" :src="scope.row.screenShotUrl" :width="50" :height="50"/>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" prop="quantity" width="140">
              <template slot-scope="scope">
                <el-input-number
                  :disabled="optType === 'view'"
                  :value="scope.row.quantity"
                  :min="1"
                  :controls="true"
                  :precision="2"
                  size="mini"
                  @change="(value) => handleQuantityChange(value, scope.row,scope.$index)"
                />
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" prop="specification" />
            <el-table-column label="备注" align="center" prop="remark" min-width="250">
              <template slot-scope="scope">
                <template v-if="optType === 'view'">
                  <!-- 查看模式：固定高度，支持滚动 -->
                  <div
                      @dblclick="handleCopyText(scope.row.remark, $event)"
                      :title="`双击复制: ${scope.row.remark || '无备注'}`"
                      style="
                            cursor: pointer;
                            padding: 6px 10px;
                            height: 100px; /* 约等于 3 行 textarea 的高度 */
                            max-height: 100px;
                            overflow-y: auto;
                            background-color: #f9f9fb;
                            border: 1px dashed #ebeef5;
                            border-radius: 4px;
                            word-break: break-all;
                            white-space: pre-wrap;
                            font-size: 13px;
                            color: #606266;
                            line-height: 1.5;
                            display: block;
                          "
                  >
                    {{ scope.row.remark || '— 无备注 —' }}
                  </div>
                </template>

                <template v-else>
                  <!-- 编辑模式：文本域 -->
                  <el-input
                      v-model="scope.row.remark"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入备注（支持换行）"
                      size="mini"
                      @change="(value) => handleRemarkChange(value, scope.row)"
                      style="width: 100%;"
                  />
                </template>
              </template>
            </el-table-column>
<!--            <el-table-column label="备注" align="center" prop="remark" min-width="250">
              <template slot-scope="scope">
                &lt;!&ndash; 方案1: 根据 optType 切换显示内容 &ndash;&gt;
                <template v-if="optType === 'view'">
                  &lt;!&ndash; 查看模式：显示文本，支持双击复制 &ndash;&gt;
                  <div
                      @dblclick="handleCopyText(scope.row.remark, $event)"
                      :title="`双击复制: ${scope.row.remark || '空'}`"
                      style="cursor: pointer; padding: 5px; min-height: 20px; word-break: break-all; white-space: pre-line;"
                  >
                    {{ scope.row.remark || '—' }}
                  </div>
                </template>
                <template v-else>
                  &lt;!&ndash; 编辑/其他模式：保持原有的输入框 &ndash;&gt;
                  <el-input
                      v-model="scope.row.remark"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入备注"
                      :disabled="optType === 'view'"
                  size="mini"
                  @change="(value) => handleRemarkChange(value, scope.row)"
                  style="width: 100%;"
                  />
                </template>
              </template>
            </el-table-column>-->
            <!-- 【结束新增】 -->

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateItem(scope.row)"
                  v-hasPermi="['purchase:detail:edit']"
                  :disabled="optType === 'view'"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteItem(scope.row)"
                  v-hasPermi="['purchase:detail:remove']"
                  :disabled="optType === 'view'"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

<!--
          <pagination
              v-show="detailTotal>0"
              :total="detailTotal"
              :page.sync="detailQueryParams.pageNum"
              :limit.sync="detailQueryParams.pageSize"
              @pagination="() => getDetailListPage(this.form.id)"
          />-->

        </el-card>
      </div>

      <!-- 物料选择组件 -->
      <ItemSelect ref="itemSelect" @onSelected="onItemSelected" />

      <!-- 子项编辑对话框 -->
      <el-dialog :title="detailTitle" :visible.sync="detailOpen" width="800px" append-to-body>
        <el-form ref="detailForm" :model="detailForm" :rules="detailRules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购申请单ID" prop="purchaseRequestId">
                <el-input v-model="detailForm.purchaseRequestId" placeholder="请输入采购申请单ID" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订购数量" prop="quantity">
                <el-input v-model="detailForm.quantity" placeholder="请输入订购数量" :disabled="!isEdit"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品编码" prop="productCode">
                <el-input v-model="detailForm.itemCode" placeholder="请输入产品编码" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品名称" prop="productName">
                <el-input v-model="detailForm.itemName" placeholder="请输入产品名称" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品单位" prop="unitOfMeasure">
                <el-input v-model="detailForm.unitOfMeasure" placeholder="产品单位" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物料图片" prop="itemImgUrl">
                <image-preview v-if="detailForm.itemImgUrl" :src="detailForm.itemImgUrl" :width="50" :height="50"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="规格型号" prop="specification">
                <el-input v-model="detailForm.specification" type="textarea" placeholder="请输入规格型号" maxlength="100" disabled show-word-limit/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购物品截图" prop="screenShotUrl" label-width="110px">
                <template v-if="isEdit">
                  <image-upload v-model="detailForm.screenShotUrl" :limit="1" />
                </template>
                <template v-else>
                  <img v-if="detailForm.screenShotUrl" :src="detailForm.screenShotUrl" id="screenShotUrl1" style="width:40% ;height: 40%;" @click="zoomImage('screenShotUrl1')"/>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="detailForm.remark" type="textarea" placeholder="请输入备注" :disabled="!isEdit"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDetailForm">确 定</el-button>
          <el-button @click="cancelDetail">取 消1</el-button>
        </div>
      </el-dialog>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消2</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPurchase, getPurchase, delPurchase, addPurchase, updatePurchase ,applyPurchase,handlerAudit,addPurchaseAll} from "@/api/purchase/purchase";
import { listDetail, getDetail, delDetail, addDetail, updateDetail } from "@/api/purchase/detail";
// import ItemSelect from "@/components/itemSelect/item.vue"
import ItemSelect from "@/components/itemSelect/item-purchase.vue"


export default {
  name: "PurchaseApply",
  dicts: ['purchase_request_status'],
  components: {
    ItemSelect
  },
  data() {
    return {
      isEdit: false,
      optType: null,
      // 遮罩层
      loading: false,
      detailLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 采购申请单表格数据
      purchaseList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      detailPageNum:1,
      detailPageSize:10,
      detailTotal:0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        organization: null,
        supplier: null,
        businessTime: null,
        // ... 其他查询参数
      },
      // 查询参数
      detailQueryParams: {
        pageNum: 1,
        pageSize: 10,
        // ... 其他查询参数
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        // 如果需要表单验证，在这里添加规则
      },
      // 子项相关数据
      detailList: [],
      detailIds: [],
      detailOpen: false,
      detailTitle: "",
      detailForm: {},
      detailRules: {
/*        purchaseRequestId: [
          { required: true, message: "采购申请单ID不能为空", trigger: "blur" }
        ],*/
        quantity: [
          { required: true, message: "订购数量不能为空", trigger: "blur" }
        ]
      },
      purchaseIds: [], // 采购申请单选中的ID数组
    };
  },
  watch: {
    // detailList: {
    //   handler(newVal) {
    //     const totalCount = newVal.reduce((sum, item) => sum + (item.quantity || 0), 0);
    //     this.form.totalCount = totalCount;
    //   },
    //   deep: true,
    //   immediate: true
    // }
    detailList: {
      handler(newVal) {
        const totalCount = newVal.reduce((sum, item) => {
          // 确保 quantity 是数字，处理 null/undefined
          const qty = parseFloat(item.quantity) || 0;
          return sum + qty;
        }, 0);
        // 使用 $set 确保 form.totalCount 的响应式更新
        this.$set(this.form, 'totalCount', totalCount);
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    isViewMode() {
      return this.optType === 'view';
    }
  },
  created() {
    this.getList();
  },
  methods: {


    /**
     * 处理双击复制文本
     * @param {string} text - 要复制的文本
     * @param {Event} event - 双击事件对象
     */
    handleCopyText(text, event) {
      // 阻止双击时选中文本
      event.preventDefault();
      event.stopPropagation();

      if (!text || text.trim() === '') {
        this.$modal.msgWarning('备注内容为空');
        return;
      }

      // 优先使用现代 Clipboard API
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text)
            .then(() => {
              this.$modal.msgSuccess('已复制到剪贴板');
            })
            .catch(err => {
              console.error('复制失败:', err);
              this.$modal.msgError('复制失败');
            });
      } else {
        // 降级方案：创建临时 textarea
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        textarea.style.left = '-9999px';
        document.body.appendChild(textarea);
        textarea.select();
        try {
          const success = document.execCommand('copy');
          if (success) {
            this.$modal.msgSuccess('已复制到剪贴板');
          } else {
            this.$modal.msgError('复制失败');
          }
        } catch (err) {
          console.error('execCommand 复制失败:', err);
          this.$modal.msgError('复制失败');
        }
        document.body.removeChild(textarea);
      }
    }  ,

    /**
     * 备注输入框值改变时触发 (可选)
     * 可以用于实时验证或防抖提交，但通常不作为主要提交方式
     */
    handleRemarkChange(newValue, row) {
      var oldRemark=row.remark;
      // 如果是临时数据，直接更新本地数据
      if (row.isTemp) {
        row.remark = value;
        this.$modal.msgSuccess("备注已更新，请保存申请单以确认修改");
        return;
      }

      // 如果是已保存的数据，调用API更新
      const updateData = {
        id: row.id,
        remark: value,
        purchaseRequestId: this.form.id
      };

      updateDetail(updateData).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.getDetailListPage(this.form.id);
      }).catch(() => {
        // 如果保存失败，回滚
        row.remark = this.oldRemark;
      });
    },
    /**
     * 备注输入框失去焦点时触发
     * 这是提交修改的主要入口
     */
    handleRemarkBlur(newValue, row) {
      // 1. 获取修改前的旧值 (用于 revert)
      // 注意：如果在 focus 时保存了 originalRemark，则使用它
      const oldValue = this.originalRemark || row.remark;
      // 但更简单的方式是：newValue 是失去焦点时的值，row.remark 在 v-model 下通常已更新
      // 我们以 newValue 为准

      // 2. 检查值是否真的发生了变化，避免不必要的请求
      if (newValue === oldValue) {
        // 值未变，无需处理
        console.log('备注未修改，无需更新');
        return;
      }

      this.handleRemarkChange(newValue,row);
    },
    isTemporaryId(id) {
      // null, undefined
      if (id == null) return true;

      // 字符串类型
      if (typeof id === 'string') {
        const trimmed = id.trim();
        // 以 'temp_' 开头 或 不是纯数字
        return trimmed.startsWith('temp_') || !/^\d+$/.test(trimmed);
      }

      // 数字类型
      if (typeof id === 'number') {
        // 非整数 或 小于 0
        return !Number.isInteger(id) || id < 0;
      }

      // 其他类型（如 boolean, array, object）都认为是临时的
      return true;
    },
    /** 查询采购申请单列表 */
    getList() {
      this.loading = true;
      listPurchase(this.queryParams).then(response => {
        this.purchaseList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        console.error('获取采购申请单列表失败：', error);
      });
    },
    // 查询明细按钮操作
    handleView(row) {
      this.reset();
      this.isEdit = true;
      this.optType = "view";
      getPurchase(row.id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看申请单信息";

        this.getDetailListPage(row.id);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.isEdit = true;
      this.optType = "add";
      this.title = "添加采购申请单";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.purchaseIds;
      this.isEdit = true;
      this.optType = "edit";
      getPurchase(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改采购申请单";
        this.detailList=[];
        this.detailTotal=0;

        this.getDetailListPage(id);
      });
      console.log('handleUpdate--optType', this.optType);
    },
    //提交申请
    // applyPurchaseSubmit(row) {
    //   const id = row.id || this.ids;
    //   this.form.id = id;
    //   this.form.requestStatus = 2;
    //   this.$modal.confirm('是提交申请？').then(() => {
    //     return applyPurchase(this.form);
    //   }).then(() => {
    //     this.getList();
    //     this.$modal.msgSuccess("提交成功");
    //   }).catch(() => {});
    // },
    /**
     * 提交采购申请
     * @param {Object} row - 当前行数据 (用于单行提交)
     */
    applyPurchaseSubmit(row) {
      // 1. 校验：检查 detailList 是否有数据
      if (!this.detailList || this.detailList.length === 0) {
        this.$modal.msgError("请增加采购申请子项");
        return; // 校验不通过，直接返回，阻止后续执行
      }

      // 2. 准备提交数据
      const id = row.id || this.ids;
      this.form.id = id;
      this.form.requestStatus = 2; // 设置状态为"提交"

      // 3. 用户确认
      this.$modal.confirm('确定要提交申请吗？').then(() => {
        // 4. 调用提交API
        return applyPurchase(this.form);
      }).then(() => {
        // 5. 提交成功
        this.getList(); // 刷新主列表
        this.$modal.msgSuccess("提交成功");
        // 可选：如果需要，可以清空或重置当前表单和明细
        // this.detailList = [];
        // this.form = {...};
      }).catch((error) => {
        // 6. 提交失败或用户取消
        // 注意：catch 会捕获 confirm 取消 和 API 调用失败
        // 可以根据 error 类型做更精细的处理，但通常用户取消不需要提示
        if (error && error !== 'cancel') {
          // 如果 error 不是 'cancel' (Element UI confirm 取消时通常不传参或传 'cancel')
          // 则认为是 API 调用失败，可以给出提示
          // this.$modal.msgError("提交失败：" + (error.message || "未知错误"));
          // 注：具体错误处理取决于 applyPurchase 的 reject 策略
        }
        // 如果只是用户点击了"取消"，则静默处理，不提示错误
      });
    },
    //审核通过
    handleAuditPass(row) {
      const id = row.id || this.ids;
      this.form.id = id;
      this.form.requestStatus = 3;
      this.$modal.confirm('是否审核该申请单？').then(() => {
        return handlerAudit(this.form);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("审核成功");
      }).catch(() => {});
    },
    //审核驳回
    handleAuditReject(row) {
      const id = row.id || this.ids;
      this.$prompt('请输入驳回原因', '审核驳回', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '请输入驳回原因',
        inputValidator: (value) => {
          if (!value) {
            return '驳回原因不能为空';
          }
          return true;
        }
      }).then(({ value }) => {
        const data = {
          id: id,
          requestStatus: '4',
          rejectMsg: value
        };
        return handlerAudit(data).then(() => {
          this.getList();
          this.$modal.msgSuccess("驳回成功");
        });
      }).catch(() => {
        this.$modal.msgInfo("已取消驳回");
      });
    },

    /** 提交按钮 (重构版 - 使用 addPurchaseAll，包含临时子项) */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log('提交==', this.form);

          // 1. 计算总数量
          const totalCount = this.detailList.reduce((sum, item) => sum + (item.quantity || 0), 0);
          this.form.totalCount = totalCount;

          // 2. 准备 PurchaseRequestDTO 对象
          const dto = {
            purchaseRequest: { ...this.form },
            details: this.detailList.map(item => {
              // 解构 item 并移除 id 和 purchaseRequestId 字段
              const { id, purchaseRequestId, isTemp, ...detailData } = item;

              // 如果是临时子项（isTemp 存在），则不传递 id 和 purchaseRequestId
              return detailData;
            })
          };


          console.log('数据组合',dto);
          // 3. 调用原子接口 addPurchaseAll
          addPurchaseAll(dto)
              .then(response => {
                // 假设后端返回的数据结构中：
                // response.data.id 是新生成或更新后的采购申请单主键
                // 可能还包含保存后的 details 列表
                const savedRequestId = response.data.id; // 获取后端返回的主单ID

                // 4. 处理成功响应
                // 如果是新增模式（this.form.id 为空），需要更新本地ID并切换状态
                if (!this.form.id) {
                  this.form.id = savedRequestId; // 更新本地表单的ID
                  this.optType = "edit"; // 切换为编辑模式
                  this.title = "修改采购申请单";
                  this.$modal.msgSuccess("新增成功");
                } else {
                  // 编辑模式
                  this.$modal.msgSuccess("修改成功");
                }

                // 5. 刷新主列表
                this.open = false;
                this.getList();

                // 6. (可选) 刷新子项列表，确保数据是最新的（特别是ID已更新）
                // 这可以确保前端的 detailList 中的临时ID被替换为真实ID
                // this.getDetailList(this.form.id); // 如果 this.form.id 已更新，可以直接用
                // 或者用 savedRequestId
                // this.getDetailList(savedRequestId);

              })
              .catch(error => {
                console.error('提交失败:', error);
                this.$modal.msgError("保存失败：" + (error.message || "网络错误或服务器异常"));
                // 注意：这里不建议自动回滚用户输入，让用户检查错误并重试
              });
        }
      });
    },
    /** 保存临时子项 */
    saveTempDetails() {
      const tempDetails = this.detailList.filter(item => item.isTemp);
      if (tempDetails.length === 0) {
        return Promise.resolve();
      }

      const savePromises = tempDetails.map(detail => {
        const detailData = {
          purchaseRequestId: this.form.id,
          itemId: detail.itemId,
          itemCode: detail.itemCode,
          itemName: detail.itemName,
          specification: detail.specification,
          unitOfMeasure: detail.unitOfMeasure,
          itemOrProduct: detail.itemOrProduct,
          itemTypeId: detail.itemTypeId,
          itemTypeName: detail.itemTypeName,
          quantity: detail.quantity,
          enableFlag: detail.enableFlag,
          imgUrl: detail.imgUrl
        };
        return addDetail(detailData);
      });

      return Promise.all(savePromises).then(() => {
        // 保存成功后重新获取子项列表
        return this.getDetailListPage(this.form.id);
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      var ids = (row.purchaseIds || this.purchaseIds) || row.id
      console.log('删除rows', row);
      if (!ids || (Array.isArray(ids) && ids.length === 0)) {
        ids = row.id; // 使用默认值
      }
      this.$modal.confirm('是否确认删除采购申请单编号为"' + ids + '"的数据项？').then(function() {
        return delPurchase(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },



    cancel() {
      // 用户点击“确定关闭”
      this.open = false;
      this.reset();
      this.detailList = [];
      this.detailIds = []; // 如果 detailIds 需要清空
      // // 【关键修改】移除条件判断，直接弹出确认框
      // this.$confirm('确定要关闭吗？关闭后所有未保存的更改（包括临时添加的数据）将丢失。', '关闭确认', {
      //   confirmButtonText: '确定关闭',
      //   cancelButtonText: '再看看',
      //   type: 'warning',
      //   closeOnClickModal: false, // 点击遮罩不关闭
      //   closeOnPressEscape: false  // 按 Esc 不关闭
      // })
      //     .then(() => {
      //       // 用户点击“确定关闭”
      //       this.open = false;
      //       this.reset();
      //       this.detailList = [];
      //       this.detailIds = []; // 如果 detailIds 需要清空
      //       // 如果还有其他需要重置的数据，也在这里处理
      //     })
      //     .catch(() => {
      //       // 用户点击“再看看”或取消，什么都不做，保持当前状态
      //       // this.$message.info('已取消关闭');
      //       // 注意：这里通常不需要提示，避免干扰
      //     });
    },


    // 表单重置
    reset() {
      this.form = {
        id: null,
        organization: null,
        supplier: null,
        businessTime: null,
        // ... 其他字段重置
      };
      this.detailList=[];
      this.detailTotal=0;
      this.resetForm("form");
    },

    /** 采购申请单表格多选框选中数据 */
    handlePurchaseSelectionChange(selection) {
      this.purchaseIds = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    canApply(row) {
      return row.requestStatus === 1 || row.requestStatus === 4;
    },
    canAudit(row) {
      return row.requestStatus === 2;
    },

    // 子项相关方法
    /** 获取子项列表 */
    getDetailListPage(requestId) {
      if (!requestId) return;
      this.detailLoading = true;
      // 1. 【关键步骤】在发起请求前，先提取并保存当前的临时数据
      const tempDetails = this.detailList.filter(item => item.isTemp);
      this.detailQueryParams.purchaseRequestId=requestId;
      this.detailQueryParams.orderBy="created_at";
      this.detailQueryParams.orderType="asc";
      listDetail(this.detailQueryParams)
          .then(response => {
            // 2. 获取后端返回的持久化数据
            const persistedDetails = response.rows;
            const backendTotal = response.total; // 后端返回的持久化数据总数

            // 3. 【关键步骤】合并数据：将持久化数据放在前面，临时数据放在后面
            // 这只是一个示例顺序，您可以根据需要调整
            this.detailList = [...persistedDetails, ...tempDetails];

            // 4. 【关键步骤】计算包含临时数据的总条数
            // 注意：这里直接使用 tempDetails.length，因为它是在请求前保存的，是准确的
            this.detailTotal = backendTotal + tempDetails.length;
            this.detailLoading = false;
          })
          .catch(() => {
            // 如果请求失败，也要确保 loading 状态关闭
            // 可以选择保留原有的 detailList (包含旧的临时数据) 或清空，取决于业务需求
            // 通常保留更合理，让用户知道他们的临时数据还在
            this.detailLoading = false;
            // this.detailList 保持不变，或者可以给个错误提示
          });
    },

    /** 子项表格多选框选中数据 */
    handleDetailSelectionChange(selection) {
      this.detailIds = selection.map(item => item.id);
    },
    /**
     * 批量删除明细项
     */
    /**
     * 批量删除明细项 (同步操作)
     */
    handleDeleteBatch() {
      // 1. 检查是否选中
      if (!this.detailIds.length) {
        this.$modal.msgWarning("请先勾选要删除的数据");
        return;
      }

      console.log('---handleDeleteBatch 删除选中:', this.detailIds);

      // 2. 确认操作
      this.$confirm(`确定删除选中的 ${this.detailIds.length} 条数据吗？`, '删除确认', {
        type: 'warning'
      }).then(async () => {
        // 3. 分离临时和持久化ID
        const tempIds = []; // 临时ID
        const persistIds = []; // 持久化ID

        this.detailIds.forEach(id => {
          if (this.isTemporaryId(id)) {
            tempIds.push(id);
          } else {
            persistIds.push(id);
          }
        });

        // 4. 从本地列表删除临时数据
        if (tempIds.length > 0) { // 修正：检查 tempIds.length > 0
          this.detailList = this.detailList.filter(item => !tempIds.includes(item.id));
        }

        // 5. 删除持久化数据 (调用后端) - 使用 await 等待
        if (persistIds.length > 0) {
          try {
            // 【关键】使用 await 等待 API 调用完成
            await delDetail(persistIds); // 假设 delDetail 返回 Promise
            this.$modal.msgSuccess(`成功删除 ${persistIds.length} 条数据`);
          } catch (error) {
            this.$modal.msgError('删除失败: ' + (error.msg || error.message));
            return; // 删除失败，不再执行后续
          }
        }

        // 6. 清空选中项
        this.detailIds = [];

        // 7. 【同步】重新获取已保存的数据列表
        // 【关键】将 this.getDetailListPage 放在 try-catch 块内，并使用 await (如果 getDetailListPage 是异步的)
        // 如果 getDetailListPage 是同步方法，直接调用即可
        // 如果 getDetailListPage 是异步方法 (通常会是)，需要 await
        try {
          // 假设 getDetailListPage 是异步的，需要 await
          await this.getDetailListPage(this.form.id);
          // 如果需要，可以在这里添加刷新成功的提示
          // this.$modal.msgSuccess('数据已刷新');
        } catch (refreshError) {
          this.$modal.msgError('刷新数据失败: ' + (refreshError.msg || refreshError.message));
          // 即使刷新失败，删除操作已经完成，通常不需要 revert
        }

      }).catch(() => {
        // 用户取消
        // this.$message.info('已取消');
      });
      // 注意：这里不能再放 getDetailListPage，因为它会立即执行
    },
    // handleDeleteBatch() {
    //   // 1. 检查是否选中
    //   if (!this.detailIds.length) {
    //     this.$modal.msgWarning("请先勾选要删除的数据");
    //     return;
    //   }
    //   console.log('---handleDeleteBatch 删除选中:',this.detailIds);
    //   // 2. 确认操作
    //   this.$confirm(`确定删除选中的 ${this.detailIds.length} 条数据吗？`, '删除确认', {
    //     type: 'warning'
    //   }).then(async () => {
    //     // 3. 分离临时和持久化ID
    //     const tempIds = []; // 临时ID
    //     const persistIds = []; // 持久化ID
    //
    //     this.detailIds.forEach(id => {
    //       // 假设您有 isTemporaryId 方法判断临时ID
    //       // 例如: return !id || (typeof id === 'string' && id.startsWith('temp_'));
    //       if (this.isTemporaryId(id)) {
    //         tempIds.push(id);
    //       } else {
    //         persistIds.push(id);
    //       }
    //     });
    //
    //     // 4. 从本地列表删除临时数据
    //     if (this.detailIds.length > 0) {
    //       this.detailList = this.detailList.filter(item => !tempIds.includes(item.id));
    //     }
    //
    //     // 5. 删除持久化数据 (调用后端)
    //     if (persistIds.length > 0) {
    //       try {
    //         // 调用您的批量删除API
    //         delDetail(persistIds);
    //         this.$modal.msgSuccess(`成功删除 ${persistIds.length} 条数据`);
    //       } catch (error) {
    //         this.$modal.msgError('删除失败: ' + (error.msg || error.message));
    //         return; // 删除失败，不再执行后续
    //       }
    //     }
    //
    //     // 6. 清空选中项
    //     this.detailIds = [];
    //
    //   }).catch(() => {
    //     // 用户取消
    //     // this.$message.info('已取消');
    //   });
    //   // 重新获取已保存的数据列表
    //   this.getDetailListPage(this.form.id);
    // },
    /** 添加子项 */
    handleAddItem() {
      this.resetDetailForm();
      this.detailForm.purchaseRequestId = this.form.id || 'temp_' + Date.now();
      this.$refs.itemSelect.showFlag = true;
    },

    /**
     * 判断一个 ID 是否为临时 ID（即非数据库真实主键）
     * 临时 ID 包括：null/undefined、以 'temp_' 开头的字符串、非纯数字字符串、非正整数等
     * @param {*} id - 待判断的 ID
     * @returns {boolean} true 表示是临时 ID
     */

    /** 修改子项 */
    handleUpdateItem(row) {
      this.resetDetailForm();

      if (this.isTemporaryId(row.id)|| !this.form.id) {//如果采购申请单主键为空则也需要临时保存
        // 🔹 临时子项：直接使用 row 数据，不请求后端
        this.detailForm = {
          ...row,// 复制当前行数据到表单
          // id:null,//id赋值为空
          purchaseRequestId: this.form.id  // ✅ 强制关联到当前主单
        };
        this.detailOpen = true;
        this.detailTitle = "修改采购申请单子项";
        console.log('--修改子项---本地获取',this.detailForm);
      } else {
        // 🔹 真实子项：调用后端接口获取完整详情
        getDetail(row.id).then(response => {
          this.detailForm = response.data;
          this.detailOpen = true;
          this.detailTitle = "修改采购申请单子项";

          console.log('--修改子项---服务器获取',this.detailForm);
        }).catch(error => {
          this.$modal.msgError("加载子项详情失败，可能是网络问题或数据已删除。");
          console.error("getDetail error:", error);
        });
      }
    },
    /** 删除子项 */
    handleDeleteItem(row) {
      const ids = row.id || this.detailIds;
      this.$modal.confirm('是否确认删除该子项？').then(function() {
        // 如果是临时数据，直接从本地列表删除
        if (row.isTemp) {
          return Promise.resolve();
        }
        // 如果是已保存的数据，调用删除API
        return delDetail(ids);
      }).then(() => {
        if (row.isTemp) {
          // 从本地列表中删除临时数据
          const index = this.detailList.findIndex(item => item.id === row.id);
          if (index > -1) {
            this.detailList.splice(index, 1);
          }
          this.$modal.msgSuccess("删除成功");
        } else {
          // 重新获取已保存的数据列表
          this.getDetailListPage(this.form.id);
          this.$modal.msgSuccess("删除成功");
        }
      }).catch(() => {});
    },

    /** 物料选择回调 */
    onItemSelected(obj) {
      if (obj != undefined && obj != null && obj.length > 0) {
        console.log('---弹出选择框处理---1--obj--',obj);
        obj.forEach(element => {
          // 检查是否已存在相同物料
          const existingItem = this.detailList.find(item => item.itemId === element.itemId);
          if (existingItem) {
            this.$modal.msgError(`物料 ${element.itemName}(${element.itemCode}) 已存在，请勿重复添加`);
            return;
          }
          console.log('---弹出选择框处理---2--detailList--',this.detailList);
          // 创建临时子项对象，不立即保存到数据库
          const tempDetail = {
            id: 'temp_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9),
            purchaseRequestId: this.form.id || 'temp_' + Date.now(),
            itemId: element.itemId,
            itemCode: element.itemCode,
            itemName: element.itemName,
            specification: element.specification,
            unitOfMeasure: element.unitOfMeasure,
            itemOrProduct: element.itemOrProduct,
            itemTypeId: element.itemTypeId,
            itemTypeName: element.itemTypeName,
            quantity: 1,
            enableFlag: 'Y',
            imgUrl: element.imgUrl,
            isTemp: true // 标记为临时数据
          };

          // 添加到本地列表
          this.detailList.push(tempDetail);

          console.log('---弹出选择框处理---3--detailList--',this.detailList);

        });
        this.$modal.msgSuccess(`已添加 ${obj.length} 个物料到列表，请保存申请单以确认添加`);
      }
    },

    /** 数量变化处理 */
    // handleQuantityChange(value, row) {
    //   // 如果是临时数据，直接更新本地数据
    //   if (row.isTemp) {
    //     row.quantity = value;
    //     this.$modal.msgSuccess("数量已更新，请保存申请单以确认修改");
    //     return;
    //   }
    //
    //   // 如果是已保存的数据，调用API更新
    //   const updateData = {
    //     id: row.id,
    //     quantity: value,
    //     remark:row.remark,
    //     purchaseRequestId: this.form.id
    //   };
    //
    //   updateDetail(updateData).then(response => {
    //     this.$modal.msgSuccess("修改成功");
    //     this.getDetailListPage(this.form.id);
    //   }).catch(() => {
    //     // 如果保存失败，回滚数量
    //     row.quantity = this.oldQuantity;
    //   });
    // },
    /** 数量变化处理 */
    handleQuantityChange(value, row, rowIndex) {
      // 保存旧值，用于可能的回滚
      const oldValue = row.quantity;
      // 立即更新视图（因为没有 v-model，需要手动触发）
      this.$set(this.detailList, rowIndex, { ...row, quantity: value }); // 如果 detailList 是数组
      // 或者直接修改（如果响应式没问题）
      // row.quantity = value;

      // 如果是临时数据，直接更新本地数据
      if (row.isTemp) {
        // 更新已经在上面完成
        this.$modal.msgSuccess("数量已更新，请保存申请单以确认修改");
        return;
      }

      // 如果是已保存的数据，调用API更新
      const updateData = {
        id: row.id,
        quantity: value,
        remark: row.remark,
        purchaseRequestId: this.form.id
      };

      updateDetail(updateData)
          .then(response => {
            this.$modal.msgSuccess("修改成功");
            // 成功后，可能需要刷新列表以获取最新状态（包含服务端计算的值等）
            // this.getDetailListPage(this.form.id);
            // 或者，如果 API 返回成功即可认为更新成功，可以不刷新整个列表
          })
          .catch(error => {
            // 如果保存失败，必须回滚到旧值
            // 使用 $set 确保响应式更新
            this.$set(this.detailList, rowIndex, { ...row, quantity: oldValue });
            // 或者
            // row.quantity = oldValue;
            this.$modal.msgError("修改失败，数量已恢复");
          });
    },

    /** 提交子项表单 */
    submitDetailForm() {
      this.$refs["detailForm"].validate(valid => {
        if (valid) {
          const { id, purchaseRequestId } = this.detailForm;
          console.log('---0.submitDetailForm id=',id);
          console.log('---0.submitDetailForm purchaseRequestId=',purchaseRequestId);
          // 🔹 情况 1：purchaseRequestId 为空 → 主单未保存，只能本地操作
          if (!purchaseRequestId) {
            // 查找 detailList 中对应项并更新（通过 id 或 temp_id）
            const index = this.detailList.findIndex(item => {
              if (typeof item.id === 'string' && item.id.startsWith('temp_')) {
                return item.id === id; // 包括 temp_xxx
              } else {
                return item.id === id; // 真实 id
              }
            });
            console.log('---1.submitDetailForm--------');
            if (index > -1) {
              // 更新本地数据（响应式）
              this.$set(this.detailList, index, { ...this.detailForm });
              this.$modal.msgSuccess("子项已本地保存");
              console.log('---1.1 submitDetailForm--------',this.detailList);
            } else {
              // 如果找不到，可能是新增的临时项
              this.detailList.push({ ...this.detailForm });
              this.$modal.msgSuccess("新增子项已本地保存");
              console.log('---1.2 submitDetailForm--------',this.detailList);
            }

            this.detailOpen = false;
          }
          // 🔹 情况 2：purchaseRequestId 有值，且 id 有值 → 更新已有子项
          else{//(purchaseRequestId && id)
            if(this.isTemporaryId(id)){//临时数据
              const index = this.detailList.findIndex(item => {
                if (typeof item.id === 'string' && item.id.startsWith('temp_')) {
                  return item.id === id; // 包括 temp_xxx
                } else {
                  return item.id === id; // 真实 id
                }
              });
              console.log('---2.1.submitDetailForm--------');

              if (index > -1) {
                // 更新本地数据（响应式）
                this.$set(this.detailList, index, { ...this.detailForm });
                this.$modal.msgSuccess("子项已本地保存");
                console.log('---1.1 submitDetailForm--------',this.detailList);
              } else {
                // 如果找不到，可能是新增的临时项
                this.detailList.push({ ...this.detailForm });
                this.$modal.msgSuccess("新增子项已本地保存");
                console.log('---1.2 submitDetailForm--------',this.detailList);
              }
              this.detailOpen = false;
            }else{//不临时数据

              console.log('---2.2 submitDetailForm--------');

              updateDetail(this.detailForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.detailOpen = false;
                // 可选：刷新子项列表（或局部更新）
                this.getDetailListPage(this.form.id);
              }).catch(error => {
                this.$modal.msgError("更新失败：" + (error.message || "未知错误"));
                console.error("updateDetail error:", error);
              });
            }

          }
        }
      });
    },
    /** 取消子项编辑 */
    cancelDetail() {
      this.detailOpen = false;
      this.resetDetailForm();
    },

    /** 重置子项表单 */
    resetDetailForm() {
      this.detailForm = {
        id: null,
        purchaseRequestId: null,
        specification: null,
        vendorId: null,
        vendorCode: null,
        vendorName: null,
        productCode: null,
        productName: null,
        quantity: null,
        receivedQuantity: null,
        unitPrice: null,
        totalWithoutTax: null,
        taxRate: null,
        totalWithTax: null,
        paidAmount: null,
        payableAmount: null,
        remarks: null,
        createdAt: null,
        updatedAt: null,
        createBy: null,
        updateBy: null
      };
      this.resetForm("detailForm");
    },

    /** 图片缩放 */
    zoomImage(idName) {
      var image = document.getElementById(idName);
      if (image.style.width === "100%") {
        image.title = "点击放大";
        image.style.width = "40%";
        image.style.height = "40%";
      } else {
        image.title = "点击缩小";
        image.style.width = "100%";
        image.style.height = "100%";
      }
    },

    /** 获取总数量 */
    getTotalQuantity() {
      this.totalCount=this.detailList.reduce((sum, item) => sum + (item.quantity || 0), 0);
      this.form.totalCount=this.totalCount;
      return this.totalCount;
    },

    /** 获取临时数据数量 */
    getTempCount() {
      return this.detailList.filter(item => item.isTemp).length;
    },

    /** 获取已保存数据数量 */
    getSavedCount() {
      return this.detailList.filter(item => !item.isTemp).length;
    }
  }
};
</script>

<style scoped>
.purchase-detail-container {
  max-height: 70vh;
  overflow-y: auto;
}

.header-card {
  margin-bottom: 20px;
}

.detail-card {
  margin-top: 20px;
}

.el-input-number.el-input-number--mini {
  width: 130px;
}
</style>
